<template>
  <div class="backTop" v-if="scroll">
    <img src="http://img1.imgtn.bdimg.com/it/u=3568493824,505707819&fm=23&gp=0.jpg" alt="" @click="backTop">
  </div>
</template>
<script>
  export default {
    data() {
      return {
        scroll: false
      }
    },
    methods: {
      backTop() {
        var top = document.body.scrollTop
        var speed = 70
        var timer = setInterval(() => {
          document.body.scrollTop = top -= speed
          if (top <= 0) {
            top = 0
            clearInterval(timer)
          }
        }, 40)
      }
    },
    mounted() {
      var _this = this
      window.onscroll = function () {

        var top = document.body.scrollTop
        if (top > 300) {
          _this.scroll = true
        } else {
          _this.scroll = false
        }
      }
    }
  }

</script>
<style lang="">
  .mr-content {
    padding: 44px 0 0 .3rem;
    overflow: hidden;
  }
  
  .loadMore {
    margin: 15px 0;
    text-align: center;
  }
  
  .load {
    display: inline-block;
    border: solid 1px #000;
    border-radius: 10px;
    line-height: 30px;
  }
  
  .backTop {
    position: fixed;
    right: 20px;
    bottom: 150px;
    z-index: 20;
    width: 2rem;
    height: 2rem;
    background: white;
    border-radius: 50%;
    text-align: center;
  }
  
  .backTop img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
</style>